<template>
  <div class="index">
    <div class="header">
      <div class="header-content">
        <div class="log-box">
          <a href="/">Forum</a>
        </div>
        <div class="search-box">
          <el-input v-model="searchItem" placeholder="请输入关键字" />
          <el-button type="primary" @click="submitSearch">搜索</el-button>
        </div>
      </div>
    </div>
    <div class="histroy">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item v-if="pathRoute">{{
          pathRoute
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="second">
      <div class="classify">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">全部分类</div>
          </template>
          <div class="tag-item">
            <a
              :href="'/?typeStr=' + item.title"
              v-for="(item, index) in classification"
              :key="index"
              class="tag-wrap"
            >
              <el-tag>{{ item.title }}</el-tag>
            </a>
          </div>
        </el-card>
      </div>
      <div class="user">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">个人信息</div>
          </template>
          <div class="user-no-login">
            <div class="img-icon">
              <el-avatar shape="square" :size="74" :src="squareUrl"></el-avatar>
            </div>
            <div class="user-wrap" v-if="isLogin == 0">
              <el-button type="primary" plain @click="openLogin"
                >请登录</el-button
              >
              <p>
                <span class="text-2">没有账号？请</span
                ><el-link type="danger" @click="openRegester">注册</el-link>
              </p>
            </div>
            <div class="user-wrap" v-else>
              <p class="userName1">{{ userInfo.userName }}</p>
              <el-button type="primary" plain @click="loginout">退出</el-button>
            </div>
            <el-drawer
              v-model="userPage"
              title="I am the title"
              :with-header="false"
            >
              <userPager :userState="userState" @loginResFnc="loginStatus" />
            </el-drawer>
          </div>
          <!-- <div class="user-info">
                        <p class="text-1">name</p>
                        <a href="">个人中心</a>
                    </div>
                    <div class="img-icon"></div> -->
        </el-card>
      </div>
    </div>
    <div class="main-wrap">
      <router-view @setPath="setPath" />
    </div>
    <!-- <div class="footer">
        <p class="footer-text"></p>
    </div> -->
  </div>
</template>
<style scoped>
.header {
  height: 90px;
  background: #fff;
  box-shadow: 0 2px 3px #e6e6e6;
  width: 100%;
}
.main-wrap,
.header-content {
  position: relative;
  width: 1000px;
  margin: 0 auto;
}
.log-box {
  float: left;
  width: 147px;
  height: 30px;
  text-indent: -999em;
  overflow: hidden;
  background: url("https://icon.zol-img.com.cn/mainpage/2019logo/logo-bbs.png")
    no-repeat;
  margin-top: 25px;
}
.search-box {
  float: right;
  margin-top: 25px;
  display: flex;
}
.classify {
  width: 660px;
  text-align: left;
}
.user {
  width: 320px;
}
.histroy {
  width: 1000px;
  margin: 0 auto;
  margin-top: 12px;
  color: #409eff;
}
.histroy /deep/ .is-link {
  color: #409eff;
}
.second {
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  width: 1000px;
  margin-top: 12px;
}
.card-header {
  color: #333;
}
.user :deep(.el-card__header) {
  padding: 12px 18px !important;
}
.classify /deep/ .el-card__header {
  padding: 12px 18px !important;
}
.tag-wrap {
  margin: 6px 8px;
  display: inline-block;
}
.card-header {
  text-align: left;
}
.text-2 {
  font-size: 14px;
  text-align: center;
  vertical-align: top;
}
.user-no-login {
  display: flex;
  justify-content: space-evenly;
}
.footer {
  position: absolute;
  bottom: 0px;
  height: 64px;
  width: 99%;
  background: #409eff;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}
.userName1 {
  margin: 8px 0;
}
</style>
<script>
import userPager from "../components/userPager";
export default {
  name: "Index",
  components: {
    userPager,
  },
  data() {
    return {
      chooseValue: "0",
      classification: [
        {
          title: "全部",
          tag: "0",
        },
      ],
      articles: [],
      searchItem: "",
      squareUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      disabled: false,
      msg: "Welcome to Use Tinymce Editor",
      isabled: false,
      userPage: false,
      userState: 0,
      isLogin: 0,
      userInfo: {
        userName: "22",
      },
      pathRoute: "",
    };
  },
  created() {
    this.getArticleType();
    this.getUserByToken();
  },
  beforeRouteUpdate(to) {
    if (!to.params.id) {
      this.pathRoute = "";
    }
  },
  methods: {
    openLogin() {
      this.userState = 0;
      this.userPage = true;
    },
    openRegester() {
      this.userState = 1;
      this.userPage = true;
    },
    loginStatus(res) {
      this.userPage = false;
      this.isLogin = 1;
      this.userInfo.userName = res.name;
      console.log(res, "123");
    },
    loginout() {
      this.isLogin = 0;
    },
    getUserByToken() {
      let token = localStorage.getItem("token");
      if (!token) {
        return;
      }
      let postData = {
        token: token,
      };
      this.$api.user.getUserByToken(postData).then((res) => {
        if (res.status == 0) {
          this.$store.commit(
            "setUserInfo",
            Object.assign({ token: token }, res.data)
          );
          this.loginStatus(res.data);
        } else {
          this.$tip.error(res.msg);
        }
      });
    },
    getArticleType() {
      this.$api.user.getArticleType().then((res) => {
        if (res.status == 0) {
          let data = res.data.split(",");
          let list = [];
          for (let i = 0; i < data.length; i++) {
            let obj = {
              title: data[i],
              tag: i,
            };
            list.push(obj);
          }
          this.classification = list;
          this.$store.commit("setClassification", list);
        }
      });
    },
    setPath(data) {
      this.pathRoute = data;
      console.log(data, "aaaa");
    },
    submitSearch(){
      this.searchItem;
      this.$router.push({path:"/",query:{searchStr:this.searchItem}});
    }
  },
};
</script>
